<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div :id="idname" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
export default {
  props: {
    idname: {
      type: String,
      required: true
    },
    datalist: {
      type: Object,
      default: function() {
        return {
          title: [],
          data: []
        };
      }
    }
  },
  watch: {
    datalist: {
      handler(val, oldVal) {
        this.chartColumn();
      },
      deep: true
    }
  },
  data() {
    return {
      datalist_copy: {
        title: [],
        data: []
      }
    };
  },
  methods: {
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);
        myChart.clear();
        myChart.setOption(option);
        let listener = function() {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    chartColumn(type) {
      // 折线图
      let dom = this.idname;
      let option = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E"
            }
          }
        },
        grid: {
          top: 20,
          bottom: 20
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            showMaxLabel: true,
            textStyle: {
              color: "#B6B6B6"
            },
            padding: [0, 5, 0, 7]
          },
          axisLine: {
            lineStyle: {
              color: "#B6B6B6"
            }
          },

          axisTick: {
            show: false
          },
          data: this.datalist.title
          // data: this.datalist_copy.title
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)"
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#B6B6B6"
            },
            formatter: function(value, index) {
              if (value >= 10000 && value < 10000000) {
                value = value / 10000 + "万";
              } else if (value >= 10000000) {
                value = value / 10000000 + "千万";
              }
              return value;
            }
          },
          axisLine: {
            lineStyle: {
              color: "#B6B6B6"
            }
          },
          axisTick: {
            show: false
          },
          type: "value"
        },
        series: [
          {
            name: "demoi",
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: this.datalist.data,
            // data: this.datalist_copy.data,
            symbol: "circle",
            // symbol: "none",
            symbolSize: 4,
            smooth: true, //这句就是让曲线变平滑的
            type: "line",
            lineStyle: {
              normal: {
                color: "rgba(0, 148, 255, 1)"
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: "#BAFFF4",
                color: "#03A98E",
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(32, 184, 237, 0.02)"
                    },
                    {
                      offset: 1,

                      color: "rgba(0, 148, 255, 0.7)"
                    }
                  ])
                }
              }
            }
          }
        ]
      };

      this.drawLine(dom, option);
    }
  },
  mounted() {
    this.chartColumn();
  }
};
</script>

<style></style>
